<!-- 供应商 -->
<template>
    <div class="supply container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h1 class="panel-title">人事档案</h1>
                </el-col>
            </el-row>
            <el-divider class="divider"></el-divider>
            <el-row justify="end" class="export-container">
                <!-- <el-button type="primary" @click="addCustomer">新增</el-button> -->
                <el-button type="primary" @click="exporting">导出</el-button>
            </el-row>
            <el-table
                ref="customerTable"
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="组织名称"></el-table-column>
                <el-table-column prop="dept.deptName" label="部门名称"></el-table-column>
                <el-table-column label="岗位名称"></el-table-column>

                <el-table-column prop="avatar" label="用户头像">
                    <template slot-scope="scope">
                        <img :src="imageUrl + scope.row.avatar" alt=""/>
                        <!-- <el-avatar
                          :size="size"
                          :src=""
                        ></el-avatar> -->
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="姓名"></el-table-column>
                <el-table-column prop="staffStatus" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.staffStatus === 1">实习</span>
                        <span v-if="scope.row.staffStatus === 2">试用期</span>
                        <span v-if="scope.row.staffStatus === 3">已转正</span>
                        <span v-if="scope.row.staffStatus === 4">试用不合格</span>
                        <span v-if="scope.row.staffStatus === 5">已辞退</span>
                        <span v-if="scope.row.staffStatus === 6">自愿离职</span>
                        <span v-if="scope.row.staffStatus === 7">黑名单</span>
                    </template>
                </el-table-column>
                <el-table-column prop="jodNumber" label="工号"></el-table-column>
                <el-table-column label="英文名"></el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sex === 1">男</span>
                        <span v-if="scope.row.sex === 2">女</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="年龄"></el-table-column>

                <el-table-column prop="birthdayTime" label="出生日期"></el-table-column>
                <el-table-column prop="nation" label="民族"></el-table-column>
                <el-table-column prop="" label="籍贯"></el-table-column>
                <el-table-column prop="" label="最高学历"></el-table-column>
                <el-table-column
                    prop="professionalQualification"
                    label="专业"
                ></el-table-column>
                <el-table-column prop="" label="毕业时间"></el-table-column>
                <el-table-column prop="" label="工作年限"></el-table-column>
                <el-table-column prop="idCard" label="身份证号码"></el-table-column>
                <el-table-column prop="marriage" label="婚姻状况">
                    <template slot-scope="scope">
                        <span v-if="scope.row.marriage === 1">是</span>
                        <span v-if="scope.row.marriage === 2">否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="hasChildren" label="有无子女">
                    <template slot-scope="scope">
                        <span v-if="scope.row.hasChildren === 1">有</span>
                        <span v-if="scope.row.hasChildren === 2">无</span>
                    </template>
                </el-table-column>
                <el-table-column prop="political" label="政治面貌"></el-table-column>
                <el-table-column prop="bankNum" label="银行卡号"></el-table-column>
                <el-table-column prop="bank" label="开户银行"></el-table-column>
                <el-table-column prop="" label="开户名称"></el-table-column>
                <el-table-column prop="phonenumber" label="联系电话"></el-table-column>
                <el-table-column prop="emergencyContact" label="紧急联系人">
                </el-table-column>
                <el-table-column prop="emergencyRelation" label="紧急联系人关系">
                </el-table-column>
                <el-table-column prop="emergencyTel" label="紧急联系人电话">
                </el-table-column>
                <el-table-column prop="email" label="邮箱地址"></el-table-column>
                <el-table-column prop="empTime" label="入职日期"></el-table-column>
                <el-table-column prop="workAddress" label="工作地点"></el-table-column>
                <el-table-column prop="professionalTitle" label="职称"></el-table-column>
                <el-table-column prop="professionalQualification" label="专业资格">
                </el-table-column>
                <el-table-column prop="" label="职位"></el-table-column>
                <el-table-column prop="" label="入职导师"></el-table-column>
                <el-table-column prop="mailingAddress" label="现通讯地址">
                </el-table-column>
                <el-table-column prop="postalCode" label="现通讯地址邮编">
                </el-table-column>
                <el-table-column prop="idAddress" label="身份证地址"></el-table-column>
                <el-table-column prop="" label="身份证邮编"></el-table-column>
                <el-table-column prop="formalTime" label="转正日期"></el-table-column>
                <el-table-column prop="resTime" label="离职日期"></el-table-column>
                <el-table-column prop="" label="离职性质"></el-table-column>
                <el-table-column prop="resReason" label="离职原因"></el-table-column>
                <el-table-column prop="recruitmentSources" label="招聘来源">
                </el-table-column>
                <el-table-column prop="recommendedBy" label="推荐人"></el-table-column>
                <el-table-column prop="" label="证件"></el-table-column>
                <!-- <el-table-column prop="avatar" label="头像"> </el-table-column> -->
                <el-table-column prop="" label="用户名"></el-table-column>
                <el-table-column prop="password" label="密码"></el-table-column>

                <!-- <el-table-column prop="dept.leader" label="负责人"></el-table-column> -->

                <el-table-column prop="status" label="帐号状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === '0'" type="success">正常</el-tag>
                        <el-tag v-if="scope.row.status === '1'" type="danger">停用</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="address" label="联系地址"></el-table-column>

                <el-table-column label="操作" width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="详情"
                            placement="bottom"
                        >
                            <el-button
                                plain
                                size="small"
                                icon="el-icon-more"
                                @click="handleDetail(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="编辑"
                            placement="bottom"
                        >
                            <el-button
                                type="primary"
                                plain
                                size="small"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除"
                            placement="bottom"
                        >
                            <el-button
                                type="danger"
                                plain
                                size="small"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="table-pagination"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>
<script>
import { listUser } from '@/api/system/user'
import { imageUrl } from '@/api/system/upload'

export default {
    data() {
        return {
            tableData: [],
            searchValue: '',
            total: 0,
            selectRows: [],
            imageUrl: imageUrl
        }
    },
    methods: {
        // 获取供应商列表
        getData() {
            // let type = 3;
            listUser().then((res) => {
                this.tableData = res.rows
                this.total = res.total * 1
            })
        },
        // 下拉菜单点击事件
        // handleCommand(command) {
        //   if (command === "add") {

        //   } else if (command === "edit") {
        //     if (this.selectRows.length !== 1) {
        //       this.$message.error("请选择一条数据进行编辑");
        //       return;
        //     } else {
        //       // 跳转编辑客户
        //       this.$router.push({ path: "/CustomerManager/EditCustomer" });
        //     }
        //   } else if (command === "delete") {
        //     if (this.selectRows.length === 0) {
        //       this.$message.error("请选择您需要删除的记录！");
        //       return;
        //     } else {
        // this.$confirm("请确定要删除所选的记录吗？", "提示", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning",
        // })
        //   .then(() => {
        //     this.$message({
        //       type: "success",
        //       message: "删除成功!",
        //     });
        //     // deleteCustomer({ids:}).then(res=>{

        //     // })
        //     // this.tableData.splice()
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: "info",
        //       message: "已取消删除",
        //     });
        //   });
        //       console.log("this.selectRows", this.selectRows);
        //     }
        //     // 跳转删除客户
        //     console.log("删除客户");
        //     // this.$router.push({ path: "/CustomerManager/AddCustomer" });
        //   }
        //   // this.$message("点击" + command);
        // },
        //新增客户
        addCustomer() {
            // this.$router.push({ path: "/CustomerManager/AddCustomer" });
        },
        //客户详情
        handleDetail(index, row) {
            // this.$router.push({
            //   path: "/CustomerManager/CustomerDetail",
            //   query: { id: row.id },
            // });
        },
        // 编辑客户
        handleEdit(index, row) {
            // this.$router.push({
            //   path: "/CustomerManager/EditCustomer",
            //   query: { id: row.id },
            // });
        },

        // 删除客户
        handleDelete(index, row) {
            this.$confirm('请确定要删除所选的记录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    delUser(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getData()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 导出按钮
        exporting() {
            console.log('exporting')
        },
        // 表格checkcbox事件
        handleSelectionChange(rows) {
            this.selectRows = rows
        }
    },

    created() {
        this.getData()
    }
}
</script>
<style lang="scss" scoped>
// .visits {
//   padding: 15px;
// }
.pagination {
    margin-top: 10px;
}

.filter-container {
    margin-bottom: 15px;
}

.export-container {
    margin: 15px 0;
}

.panel-title {
    font-size: 18px;
    color: #37474f;
    font-weight: 500;
    text-shadow: rgba(0, 0, 0, 0.15) 0 0 1px;
}

.divider {
    margin: 0;
}
</style>
